<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			#job-title,
			#pay,
			#company-name,
			#loc {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap
			}
			#company-name,
			#loc {
				line-height: 35px;
				color: #888;
			}
			#job-title {
				color: #555;
				float: left;
				font-weight: bold;
				max-width: 80%;
			}
			#pay {
				float: right;
				color: #ff6501;
				max-width: 20%;
			}
			#company-name {
				font-weight: 300;
				float: left;
				font-size: 15px;
				max-width: 66%;
			}
			#loc {
				font-size: 15px;
				float: right;
				max-width: 34%;
			}
			.mui-table-view-chevron .mui-table-view-cell {
				padding-right: 15px;
			}
			.mui-table-view-cell {
				padding-top: 7px;
				padding-bottom: 0;
			}
			#job-list {
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<div id="job-list-container" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul id="job-list" class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell" id="0">
						<div>
							<span id="job-title">数据库工程师</span>
							<span id="pay">8000</span>
							<br />
							<span id="company-name">文思海辉科技有限公司</span>
							<span id="loc">上海-静安区</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/commons.js"></script>
		<script>
			mui.init({
				swipeBack: false,
				keyEventBind: {
					backbutton: false
				},
				pullRefresh: {
					container: '#job-list-container',
					up: {
						callback: pullupRefresh
					}
				}
			});

			function pullupRefresh() {
				mui('#job-list-container').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
				var table = document.body.querySelector('.mui-table-view');
				var obj = null;
				/*mui.post("www.baidu.com", {
					index: index
				}, function(data) {
					obj = data;
				},'json');
				for (var i = 0; i < obj.length; i++) {
					var li = parseData(obj);
					table.appendChild(li);
				}*/
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					mui('#job-list-container').pullRefresh().pullupLoading();
				});
			} else {
				mui.ready(function() {
					mui('#job-list-container').pullRefresh().pullupLoading();
				});
			}
			mui.plusReady(function() {
				//预加载主模板	
				getTemplate('default', 'pages/template.html');
				//关闭splash页面
				plus.navigator.closeSplashscreen();
			});
			 //主列表点击事件
			mui('#job-list').on('tap', 'li', function() {
				var jobId = this.getAttribute('id');
				var template = getTemplate("default");
				var headerWebview = template.header;
				//获得共用子webview
				var contentWebview = template.content;
				mui.fire(headerWebview, 'updateHeader', {
					title: "",
					showMenu: false
				});
				contentWebview.loadURL("pages/job-details.html");
				//将jobId作为参数传递 到子页面
				mui.fire(contentWebview, 'passArgs', {
					jobId: jobId
				});
				contentWebview.show();
				headerWebview.show('fade-in', 150);
			});
			var index = null; //主页面
			function openMenu() {
				!index && (index = mui.currentWebview.parent());
				mui.fire(index, "menu:open");
			}
		</script>
	</body>

</html>